<template>
  <div>
    <Header :title="isEdit ? '编辑地址' : '新增地址'" />
    <van-address-edit
      :area-list="areaList"
      :address-info="store.addressDetail"
      :show-delete="isEdit ? true : false"
      show-set-default
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete" />
  </div>
</template>

<script setup>
  import Header from "@/components/Header.vue"
  import useAddressStore from "@/store/addressStore"
  import { areaList } from "@vant/area-data"
  import { useRouter, useRoute } from "vue-router"
  import { onMounted, ref } from "vue"
  const store = useAddressStore()
  const router = useRouter()
  const route = useRoute()
  let addressId = route.query.addressId
  const isEdit = ref(!!addressId)
  onMounted(() => {
    //初始化地址列表
    if (isEdit.value) {
      store.asyncGetAddressDetail(addressId)
    }
  })
  let onSave = obj => {
    let option = {
      userName: obj.name,
      userPhone: obj.tel,
      provinceName: obj.province,
      cityName: obj.city,
      regionName: obj.county,
      detailAddress: obj.addressDetail,
      defaultFlag: obj.isDefault ? 1 : 0,
    }
    if (isEdit.value) {
      option.addressId = addressId
      store.asyncUpdateAddress(option)
      return
    } else {
      store.asyncAddAddress(option)
    }
  }
  let onDelete = item => {
    store.asyncRemoveAddress(item.id)
  }
</script>

<style scoped lang="less"></style>
